<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex</title>
    <style>
        *{
        margin:0px;
        padding:0px;
    }
    .container{
        display:flex;
        flex-direction: column;
        height: 100vh;
        /* 父元素设置高度，中间自动撑开 */
    }
    header{
        background: #eeeeee;
        height:80px;
    }
    section{
        background: #f00;
        flex:1;
    }
    footer{
        background: #f0f;
        height:80px;
    }
    </style>
    
</head>
<body>
        <!-- flex布局
        父元素 
        display:flex;
        flex-diretion:row  决定排列方向
        flex-wrap:wrap    换行
        justify-content:space-between 子元素水平居中
        align-items:center 垂直居中
        
        项目（子元素）属性
        flex-grow: 定义项目的放大比例，默认为0.
        flex-shrink :定义项目的缩小比例  默认为1
        flex:flex-grow  flex-shrink flex-basis简写  默认值 0 1 auto 
        flex:1使用最多 -->
    <div class="container"> 
        <header>头部</header>
        <section>中间</section>
        <footer>尾部</footer>
    </div>
</body>
</html>